﻿@using BonjourQuotation.UI.Models.PartialModel
@using MvcCheckBoxList
@model OperationInvoiceViewModel
@{
    Layout = null;
}
<script type="text/javascript">
    var InvoiceModel;
    var InvoiceGridcountinvalid;
    debugger;
    LoadInvoiceGrid();

    function LoadInvoiceGrid() {
        debugger
        InvoiceGridcountinvalid = 0;
        InitInvoiceCalendars();
        InvoiceModel = $(@Html.Raw(Json.Encode(Model))).JSModel();
        if (InvoiceModel[0].IsInvSearch != true)
            return;
        var InvoicecolumnHeaders = [];
        var Invoicecolumns = [];
        var InvoicecolWidth = [];
        var InvoiceType = [];
        var InvoiceCrDeb = ["Yes", "No"];
        var InvoiceCur = ["USD", "CAD"];
        // Init status
        LoadQuotaPricesByQuotaID(InvoiceModel[0].InvGroupQuotaID);
        $(InvoiceModel[0].InvTypes).each(function (index, elem) {
            InvoiceType.push(elem.Text);
        });
        if (InvoiceModel[0].Rows.length > 0) {
            OperationInvoiceQtyValue = InvoiceModel[0].Rows[0].InvQty
        }

        InvoicecolumnHeaders.push("#");
        Invoicecolumns.push({ data: "InvLineNo", type: "text" });
        InvoicecolWidth.push(50);

        //InvoicecolumnHeaders.push("Type");
        //Invoicecolumns.push({ data: "InvSelType", type: "dropdown", source: InvoiceType });
        //InvoicecolWidth.push(140);

        InvoicecolumnHeaders.push("Qty");
        Invoicecolumns.push({ data: "InvQty", type: "numeric" });
        InvoicecolWidth.push(60);

        InvoicecolumnHeaders.push("Description");
        Invoicecolumns.push({ data: "InvDescription", type: "text" });
        InvoicecolWidth.push(482);

        InvoicecolumnHeaders.push("Cr");
        Invoicecolumns.push({ data: "InvCrDeb", type: "dropdown", source: InvoiceCrDeb });
        InvoicecolWidth.push(50);

        InvoicecolumnHeaders.push("Org.Price");
        Invoicecolumns.push({ data: "InvPrice", type: "numeric", format: '0,0.00' });
        InvoicecolWidth.push(90);

        InvoicecolumnHeaders.push("Price $");
        Invoicecolumns.push({ data: "InvPriceChange", type: "numeric", format: '$0,0.00' });
        InvoicecolWidth.push(90);

        InvoicecolumnHeaders.push("Debit");
        Invoicecolumns.push({ data: "InvDebit", type: "numeric", format: '$0,0.00', readOnly: true });
        InvoicecolWidth.push(90);

        InvoicecolumnHeaders.push("Credit");
        Invoicecolumns.push({ data: "InvCredit", type: "numeric", format: '$0,0.00', readOnly: true });
        InvoicecolWidth.push(90);

        InvoicecolumnHeaders.push("Currency");
        Invoicecolumns.push({ data: "InvCurrency", type: "dropdown", source: InvoiceCur });
        InvoicecolWidth.push(80);

        InvoicecolumnHeaders.push("Delete");
        Invoicecolumns.push({ data: "InvDeleteHtml", renderer: "html" });
        InvoicecolWidth.push(80);

        InvRedColorRendererForNegative = function (instance, td, row, col, prop, value, cellProperties) {
            Handsontable.renderers.NumericRenderer.apply(this, arguments);
            td.style.color = 'red';
        };

        RedColorRenderer = function (instance, td, row, col, prop, value, cellProperties) {
            Handsontable.renderers.AutocompleteRenderer.apply(this, arguments);
            td.style.color = 'red';
        };
        BlackColorRenderer = function (instance, td, row, col, prop, value, cellProperties) {
            Handsontable.renderers.AutocompleteRenderer.apply(this, arguments);
            td.style.color = 'black';
        };

        var Invoicedata = InvoiceModel[0].Rows;
        $("#OperInvoiceGrid").show();
        $('#OperInvoiceGrid').handsontable({
            data: Invoicedata,
            minSpareRows: 1,
            colHeaders: InvoicecolumnHeaders,
            colWidths: InvoicecolWidth,
            contextMenu: false,
            manualColumnResize: true,
            manualRowResize: true,
            columns: Invoicecolumns,
            afterCreateRow: function (index) {
                // var instance = this;
                // instance.getData()[index].InvCrDeb = "No";
                //  instance.getData()[index].InvCurrency = "USD";

            },
            afterChange: function (data, source) {
                debugger;
                if (data != null) {
                    CheckOperInvDataChanges();
                    var instance = this;
                    var row = data[0][0];
                    var ischanged = false;
                    if (instance.getData()[row].InvCrDeb == null) {
                        instance.getData()[row].InvCrDeb = "No";
                        ischanged = true;
                    }
                    if (instance.getData()[row].InvCurrency == null) {
                        instance.getData()[row].InvCurrency = "USD";
                        ischanged = true;
                    }
                    if (ischanged)
                        instance.render();
                }
                if (data != null && data[0][1] == "InvPrice") {
                    var instance = this;
                    var row = data[0][0];
                    if (instance.getData()[row].InvCurrency == "USD")
                        instance.getData()[row].InvPriceChange = data[0][3];
                    if (instance.getData()[row].InvCurrency == "CAD" && InvoiceModel[0].InvCadUsdRate != null)
                        instance.getData()[row].InvPriceChange = data[0][3] * InvoiceModel[0].InvCadUsdRate;
                    if (instance.getData()[row].InvQty != null && instance.getData()[row].InvPriceChange != null) {
                        if (instance.getData()[row].InvCrDeb == "No")
                            instance.getData()[row].InvDebit = instance.getData()[row].InvQty * instance.getData()[row].InvPriceChange;
                        if (instance.getData()[row].InvCrDeb == "Yes")
                            instance.getData()[row].InvCredit = instance.getData()[row].InvQty * instance.getData()[row].InvPriceChange;
                    }
                    instance.render();
                }
                if (data != null && data[0][1] == "InvPriceChange") {
                    var instance = this;
                    var row = data[0][0];
                    if (instance.getData()[row].InvQty != null && data[0][3] != null) {
                        if (instance.getData()[row].InvCrDeb == "No")
                            instance.getData()[row].InvDebit = instance.getData()[row].InvQty * data[0][3];
                        if (instance.getData()[row].InvCrDeb == "Yes")
                            instance.getData()[row].InvCredit = instance.getData()[row].InvQty * data[0][3];
                        instance.render();
                    }
                }
                if (data != null && data[0][1] == "InvQty") {
                    var instance = this;
                    var row = data[0][0];
                    if (instance.getData()[row].InvPriceChange != null && data[0][3] != null) {
                        if (instance.getData()[row].InvCrDeb == "No")
                            instance.getData()[row].InvDebit = instance.getData()[row].InvPriceChange * data[0][3];
                        if (instance.getData()[row].InvCrDeb == "Yes")
                            instance.getData()[row].InvCredit = instance.getData()[row].InvPriceChange * data[0][3];
                        instance.render();
                    }
                }
                if (data != null && data[0][1] == "InvCurrency" && InvoiceModel[0].InvCadUsdRate != null) {
                    if (data[0][2] != data[0][3]) {
                        var instance = this;
                        var row = data[0][0];
                        instance.getData()[row].InvPriceChange = data[0][2] == "CAD" ? instance.getData()[row].InvPriceChange / InvoiceModel[0].InvCadUsdRate : instance.getData()[row].InvPriceChange;
                        instance.getData()[row].InvCredit = data[0][2] == "CAD" ? instance.getData()[row].InvCredit / InvoiceModel[0].InvCadUsdRate : instance.getData()[row].InvCredit;
                        instance.getData()[row].InvDebit = data[0][2] == "CAD" ? instance.getData()[row].InvDebit / InvoiceModel[0].InvCadUsdRate : instance.getData()[row].InvDebit;
                        if (isInvoiceCad(data[0][3])) {
                            instance.renderer = RedColorRenderer;
                        }
                        else {
                            instance.renderer = BlackColorRenderer;
                        }
                        instance.render();
                    }
                }
                if (data != null && data[0][1] == "InvCrDeb") {
                    if (data[0][2] != data[0][3]) {
                        var instance = this;
                        var row = data[0][0];
                        if (data[0][3] == "Yes") {
                            instance.getData()[row].InvCredit = instance.getData()[row].InvDebit;
                            instance.getData()[row].InvDebit = 0;
                        }
                        if (data[0][3] == "No") {
                            instance.getData()[row].InvDebit = instance.getData()[row].InvCredit;
                            instance.getData()[row].InvCredit = 0;
                        }
                        instance.render();
                    }
                }
            },
            //  isEmptyRow: customIsEmptyRow,
            cells: function (row, col, prop) {
                var Cellinstance = this;
                if (Cellinstance.renderer == Handsontable.renderers.NumericRenderer && Cellinstance.instance.getDataAtCell(row, col) < 0) {
                    Cellinstance.renderer = InvRedColorRendererForNegative;
                }
                if (prop == "InvCurrency") {
                    var curr = Cellinstance.instance.getData()[row].InvCurrency;
                    if (isInvoiceCad(curr)) {
                        Cellinstance.renderer = RedColorRenderer;
                    }
                    else {
                        Cellinstance.renderer = BlackColorRenderer;
                    }

                }
            }
        });
    }

    function isInvoiceCad(curr) {
        if (curr != null) {
            if (curr == "CAD") {
                return true; // 5 for friday, 6 for saturday
            }
            else
                return false;
        }
        else
            return false;
    }

    function RemoveInvoiceByLine(GroupId, LineNo, VendorID) {
        debugger;
        if (VendorID != "0")
        {
            jAlert("This invoice can't be deleted.", "Warning!");
            return;
        }
        $("#IsInvRemove").val("True");
        $("#IsInvSearch").val("false");
        $("#InvoiceGroupID").val(GroupId);
        $("#InvoiceLineNo").val(LineNo);
        $("#InvoiceSave").click();
    }

    // Save Invoice
    function InvoiceSaveAll() {
        debugger;
        var Rows = $('#OperInvoiceGrid').data('handsontable').getData();
        var IsValidInvQtyWrong = true;
        var IsValidInvPrice = true;
        var IsValidInvPriceWrong = true;
        var IsValidInvPriceChangeWrong = true;
        var IsValidInvDebitWrong = true;
        var IsValidInvCreditWrong = true;

        // must be filled
        if ($("#InvDepositDue").val() == "" && $("#InvProforma").is(':checked')) {
            jAlert("Please fill Deposit Due Date.", "Warning!");
            return;
        }
        if ($("#InvoiceDate").val() == "" && $("#InvProformaIsInvoice").is(':checked')) {
            jAlert("Please fill Invoice Date.", "Warning!");
            return;
        }

        if (Rows.length > 1) {
            $(Rows).each(function (index, elem) {
                if (index < Rows.length - 1) {
                    // all validations here
                    if (elem.InvQty != undefined && elem.InvQty < 0 || (elem.InvQty != undefined && elem.InvQty.length > 0 && isInt(elem.InvQty) == false))
                        IsValidInvQtyWrong = false;
                    if ((elem.InvPrice != undefined || elem.InvPrice == null) && (elem.InvPrice <= 0))
                        IsValidInvPrice = false;
                    if ((elem.InvPrice != undefined && elem.InvPrice.length > 0 && isNaN(elem.InvPrice) == true))
                        IsValidInvPriceWrong = false;
                    if (elem.InvPriceChange != undefined && elem.InvPriceChange < 0 || (elem.InvPriceChange != undefined && elem.InvPriceChange.length > 0 && isNaN(elem.InvPriceChange) == true))
                        IsValidInvPriceChangeWrong = false;
                    if (elem.InvDebit != undefined && elem.InvDebit < 0 || (elem.InvDebit != undefined && elem.InvDebit.length > 0 && isNaN(elem.InvDebit) == true))
                        IsValidInvDebitWrong = false;
                    if (elem.InvCredit != undefined && elem.InvCredit < 0 || (elem.InvCredit != undefined && elem.InvCredit.length > 0 && isNaN(elem.InvCredit) == true))
                        IsValidInvCreditWrong = false;
                }
            });
            debugger
            if (IsValidInvQtyWrong == false) {
                jAlert("Qty data is invalid.", "Error!");
                return;
            }
            if (IsValidInvPrice == false) {
                jAlert("Price can't be empty and must be greater 0", "Error!");
                return;
            }
            if (IsValidInvPriceWrong == false) {
                jAlert("Price data is invalid.", "Error!");
                return;
            }
            if (IsValidInvPriceChangeWrong == false) {
                jAlert("Price $ data is invalid.", "Error!");
                return;
            }
            if (IsValidInvDebitWrong == false) {
                jAlert("Debit data is invalid.", "Error!");
                return;
            }
            if (IsValidInvCreditWrong == false) {
                jAlert("Credit data is invalid.", "Error!");
                return;
            }
            var OperationInvoiceViewModel = {
                Rows: Rows,
                InvComments: $('#InvComments').val(),
                InvProfComments: $('#InvProfComments').val(),
                InvoiceGroupID: $('#InvoiceGroupID').val(),
                InvoiceCustomerID: $('#InvoiceCustomerID').val(),
                SelectedInvBank: $('#SelectedInvBank').val(),
                SelectedInvPaymentTerms: $('#SelectedInvPaymentTerms').val(),
                SelectedInvSalesPerson: $('#SelectedInvSalesPerson').val(),
                SelectedInvContactPerson: $('#SelectedInvContactPerson').val(),
                InvProforma: $('#InvProformaIsInvoice').is(':checked'),
                InvoiceDate: $('#InvoiceDate').val(),
                InvDepositDue: $('#InvDepositDue').val(),
                InvFinalPayment: $('#InvFinalPayment').val(),
                InvCadUsdRate: $('#InvCadUsdRate').val(),
                InvDepositM: $('#InvDepositM').is(':checked'),
                InvDepositAmt: $('#InvDepositAmt').val(),
            };

            var DTO = JSON.stringify(OperationInvoiceViewModel);

            $.ajax({
                url: urls["OperationInvoiceGridSaveData"],
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                data: DTO,
                success: function (data) {
                    // LoadRoomGrid(false);
                    $("#tabInvoice").html(data);

                },
                error: function (xhr) {
                    //   alert('Error: ' + xhr.statusText);
                },
                complete: function () {
                    if ($("#OperInvMessageInfo").val() != "")
                        jAlert($("#OperInvMessageInfo").val(), 'Error!');
                    else if (!($('#InvDepositM').is(':checked')))
                        $('#InvDepositAmt').val(parseFloat(0));
                }
            });
        }
        else {
            jAlert("You have not any data for save", "Error!");
        }
    }
    function OperInvoiceComplete() {
        if ($("#OperInvMessageInfo").val() != "")
            jAlert($("#OperInvMessageInfo").val(), 'Error!');
    }
    function CheckOperInvDataChanges() {
        if (!$("#OperInvSaveBtn").hasClass("GridDataChanged"))
            $("#OperInvSaveBtn").addClass("GridDataChanged");
    }
    function LoadQuotaPricesByQuotaID(QuotaID) {
        $.ajax({
            url: urls["OperationLoadQuotaPricesByQuotaID"],
            type: 'GET',
            data: { 'QuotaID': QuotaID },
            success: function (data) {
                $("#QuotaPricesDiv").html(data);
                $("#QuotaPricesDiv").show();
            },
            error: function (xhr) {
                alert('Error: ' + xhr.statusText);
            },
            complete: function () {
                //  QuotaPricePopUp();
            }
        });
    }
    // Inv details changed
    $(document).on('change', '.InvoiceDetData', function () {
        if (!$("#OperInvSaveBtn").hasClass("GridDataChanged"))
            $("#OperInvSaveBtn").addClass("GridDataChanged");
    });
    function OperationInvoicePreview() {
        if (InvoiceModel[0].InvIsGroupGir) {
            window.open('../Report/GirGroupInvoiceReport?GroupID=@Model.InvoiceGroupID&CustomerID=@Model.InvoiceCustomerID');
        }
        else {
            var Qty = OperationInvoiceQtyValue;
            var LastPax = OperationInvoiceQuotaPricesLastPaxValue;
            if (parseInt(LastPax) > parseInt(Qty)) {
                jAlert("Invoice pax is less then quotation min pax.", "Warning!");
            }
            else {
                window.open('../Report/GroupInvoiceReport?GroupID=@Model.InvoiceGroupID');
            }
        }
    }
    $(document).on('change', '#InvDepositM', function () {
        if(!($(this).is(':checked')))
        {        
            $("#InvDepositAmt").hide();
        }
        else
        {
            $("#InvDepositAmt").show();

        }
    });
    // Money textboxes format 
    $(document).on('change', '.MoneyTxb', function () {
        var val = parseFloat(Math.round($(this).val() * 100) / 100).toFixed(2);
        $(this).val(val);
    });
</script>
<div class="OperationTabsTitleDiv">
    <span class="OperationTabsTitle">Invoice</span>
</div>
@using (Ajax.BeginForm("SaveOperationInvoice", "Operation", new AjaxOptions() { HttpMethod = "Post", UpdateTargetId = "tabInvoice", OnComplete= "OperInvoiceComplete", InsertionMode = InsertionMode.Replace }, new { enctype = "multipart/form-data", id = "OperInvoiceForm" }))
{  
    @Html.HiddenFor(model=>model.IsInvSearch)
    @Html.HiddenFor(model=>model.IsInvRemove)
    @Html.HiddenFor(model=>model.InvoiceGroupID)
    @Html.HiddenFor(model=>model.InvoiceCustomerID)
    @Html.HiddenFor(model=>model.InvoiceLineNo)
    @Html.HiddenFor(model=>model.OperInvMessageInfo)
    @Html.HiddenFor(model => model.InvIsGroupGir)
        <div style="float:left;">
            @Html.HiddenFor(model => Model.InvGroupID)
            @Html.TextBoxFor(model => Model.InvGroupName, new { @class = "TxtComplete table_inputs_250", @placeholder = "Group Name" })
        </div>
        <div style="float:left;">
            @Html.TextBoxFor(model => Model.InvGroupCode, new { @class = "TxtComplete table_inputs_180", @placeholder = "Group Code" })
        </div>
        <button class="btn14 btn50" id="InvoiceSearch" type="button">Go</button>
    if (Model.InvIsGroupGir == false)
    {
        <button class="btn14 btn120" onclick="LoadQuotaPricesByQuotaID(@Model.InvGroupQuotaID)" type="button">Quota Prices</button>
        <div id="QuotaPricesDiv"></div>
    }
    if (Model.IsInvSearch)
    {
        <div style="height: 185px; width: 1185px; background-color: rgba(128, 128, 128, 0.8);">
            <div class="pull-left" style="margin-left:25px; margin-bottom:15px;">
                <div class="row form-row">
                    <div class="ElementsPaddingRight30 col-lg-4">
                        <div class="input-group">
                            <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.InvoiceGroupName)</span>
                            @Html.LabelForModel(Model.InvoiceGroupName, new { @class = "table_inputs_SmallPadding2 inpputgr form-control" })
                        </div>
                    </div>
                    <div class="ElementsPaddingRight30 col-lg-4">
                        <div class="input-group">
                            <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.InvoiceCustomer)</span>
                            @Html.LabelForModel(Model.InvoiceCustomer, new { @class = "table_inputs_SmallPadding2 inpputgr form-control" })
                        </div>
                    </div>
                    <div class="ElementsPaddingRight30 col-lg-4">
                        <div class="input-group">
                            <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.InvContactPerson)</span>
                            @Html.DropDownListFor(model => model.SelectedInvContactPerson, new SelectList(Model.InvContactPerson, "Value", "Text"), new { @class = "table_inputs_SmallPadding2 inpputgr form-control InvoiceDetData" })
                        </div>
                    </div>
                </div>
                <div class="row form-row">
                    <div class="ElementsPaddingRight30 col-lg-3">
                        <div class="input-group">
                            <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.InvoiceGroupCode)</span>
                            @Html.LabelForModel(Model.InvoiceGroupCode, new { @class = "table_inputs_SmallPadding2 inpputgr form-control" })
                        </div>
                    </div>
                    <div class="ElementsPaddingRight30 col-lg-4" style="width:30% !important;">
                        <div class="input-group">
                            <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.InvPaymentTerms)</span>
                            @Html.DropDownListFor(model => model.SelectedInvPaymentTerms, new SelectList(Model.InvPaymentTerms, "Value", "Text"), new { @class = "table_inputs_SmallPadding2 inpputgr form-control InvoiceDetData" })
                        </div>
                    </div>
                    <div class="ElementsPaddingRight30 col-lg-3" style="width:27% !important;">
                        <div class="input-group">
                            <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.InvBanks)</span>
                            @Html.DropDownListFor(model => model.SelectedInvBank, new SelectList(Model.InvBanks, "Value", "Text"), new { @class = "table_inputs_SmallPadding2 inpputgr form-control InvoiceDetData" })
                        </div>
                    </div>
                    <div class=" col-lg-1">
                        <div class="input-group">
                            @Html.RadioButtonFor(model => model.InvProforma, false, new { @class = "InvoiceDetData" })
                            <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.InvProforma)</span>
                        </div>
                    </div>
                    <div class="ElementsPaddingRight30 col-lg-1">
                        <div class="input-group">
                            @Html.RadioButtonFor(model => model.InvProforma, true, new { @class = "InvoiceDetData", @id = "InvProformaIsInvoice"})
                            <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.InvInvoice, new {@style="color:red;"})</span>
                        </div>
                    </div>
                </div>
                <div class="row form-row">
                    <div class="ElementsPaddingRight30 col-lg-3" style="width:20% !important;">
                        <div class="input-group">
                            <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.InvoiceNo)</span>
                            @Html.LabelForModel(Model.InvoiceNo, new { @class = "table_inputs_SmallPadding2 inpputgr form-control" })
                        </div>
                    </div>
                    <div class="ElementsPaddingRight30 col-lg-3" style="width:15% !important;">
                        <div class="input-group">
                            <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.InvoiceDate)</span>
                            @Html.TextBoxFor(model => model.InvoiceDate, new { @class = "table_inputs_SmallPadding2 inpputgr form-control InvoiceDateCalendar InvoiceDetData" })
                        </div>
                    </div>
                    <div class="ElementsPaddingRight30 col-lg-4" style="width:28% !important;">
                        <div class="input-group">
                            <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.InvSalesPerson)</span>
                            @Html.DropDownListFor(model => model.SelectedInvSalesPerson, new SelectList(Model.InvSalesPerson, "Value", "Text"), new { @class = "table_inputs_SmallPadding2 inpputgr form-control InvoiceDetData" })
                        </div>
                    </div>
                    <div class="ElementsPaddingRight30 col-lg-3" style="width:20% !important;">
                        <div class="input-group">
                            <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.InvDepositDue)</span>
                            @Html.TextBoxFor(model => model.InvDepositDue, new { @class = "table_inputs_SmallPadding2 inpputgr form-control InvoiceDateCalendar InvoiceDetData" })
                        </div>
                    </div>
                    <div class="ElementsPaddingRight30 col-lg-2">
                        <div class="input-group">
                            <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.InvCadUsdRate)</span>
                            @Html.TextBoxFor(model => model.InvCadUsdRate, new { @class = "table_inputs_SmallPadding2 inpputgr form-control InvoiceDetData QuotaOnlyDecimalDigits MoneyTxb" })
                        </div>
                    </div>
                </div>
                <div class="row form-row">
                    <div class="ElementsPaddingRight30 col-lg-2" style="width:8% !important">
                        <div class="input-group">
                            <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.InvDepositM)</span>
                            @Html.CheckBoxFor(model => model.InvDepositM, new { @class = "InvoiceDetData" })
                        </div>
                    </div>
                    <div class="ElementsPaddingRight30 col-lg-1" style="width:17% !important">
                        <div class="input-group">
                            @if (Model.InvDepositM == true)
                            {
                                @Html.TextBoxFor(model => model.InvDepositAmt, new { @class = "table_inputs_SmallPadding2 inpputgr form-control InvoiceDetData QuotaOnlyDecimalDigits MoneyTxb" });
                            }
                            else
                            {
                                @Html.TextBoxFor(model => model.InvDepositAmt, new { @class = "table_inputs_SmallPadding2 inpputgr form-control InvoiceDetData QuotaOnlyDecimalDigits MoneyTxb", @style = "display:none" });
                            }
                        </div>
                    </div>

                    <div class="ElementsPaddingRight30 col-lg-3">
                        <div class="input-group">
                            <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.InvoiceArrivalDate)</span>
                            @Html.LabelForModel(Model.InvoiceArrivalDate, new { @class = "table_inputs_SmallPadding2 inpputgr form-control" })
                        </div>
                    </div>
                    <div class="ElementsPaddingRight30 col-lg-3">
                        <div class="input-group">
                            <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.InvFinalPayment)</span>
                            @Html.TextBoxFor(model => model.InvFinalPayment, new { @class = "table_inputs_SmallPadding2 inpputgr form-control InvoiceDateCalendar InvoiceDetData" })
                        </div>
                    </div>
                    <div class="ElementsPaddingRight30 col-lg-3 pull-right">
                        <div class="input-group">
                            <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.InvoiceRateChangeDate)</span>
                            @Html.LabelForModel(Model.InvoiceRateChangeDate, new { @class = "table_inputs_SmallPadding2 inpputgr form-control" })
                        </div>
                    </div>
                </div>
            </div>
        </div>

    <div id="OperInvoiceGrid" class="handsontable" style="width: 1185px; height:250px; overflow:auto; display:none;"></div>

    }
    <div style="@(@Model.IsInvSearch ? "" : "display:none")">
        <div>
            @Html.TextAreaFor(model => model.InvComments, new { @class = "table_inputs_580 InvoiceDetData", placeholder = "Invoice Comments:" })
            @Html.TextAreaFor(model => model.InvProfComments, new { @class = "table_inputs_580 InvoiceDetData", placeholder = "Proforma Comments:" })
        </div>
        @if (Model.OperationPLInvoiceView)
        { 
            <div class="OperationTabsTitleDiv">
                <span class="OperationTabsTitle">Invoice P/L</span>
            </div>
            <div class="pull-left" style="margin-left:15px; margin-bottom:15px;">
                <div class="row form-row">
                    @if (Model.OperationPLInvoiceTotalDebitView)
                    {
                        <div class=" col-lg-4 withoutPadding" style="width:20% !important">
                            <div class="input-group">
                                <span class="input-group-addon SumControlsLabelFSize">@Html.LabelFor(model => model.InvTotalDebit)</span>
                                @Html.TextBoxFor(model => model.InvTotalDebit, new { @class = "form-control", readOnly = true })
                            </div>
                        </div>
                    }
                    @if (Model.OperationPLInvoiceTotalCreditView)
                    {
                        <div class=" col-lg-4 withoutPadding" style="width:20% !important">
                            <div class="input-group">
                                <span class="input-group-addon SumControlsLabelFSize">@Html.LabelFor(model => model.InvTotalCredit)</span>
                                @Html.TextBoxFor(model => model.InvTotalCredit, new { @class = "form-control", readOnly = true })
                            </div>
                        </div>
                    }
                    @if (Model.OperationPLInvoiceTotalDepositView)
                    {
                        <div class=" col-lg-3 withoutPadding" style="width:20% !important">
                            <div class="input-group">
                                <span class="input-group-addon SumControlsLabelFSize">@Html.LabelFor(model => model.InvTotalDeposit)</span>
                                @Html.TextBoxFor(model => model.InvTotalDeposit, new { @class = "form-control", readOnly = true })
                            </div>
                        </div>
                    }
                    @if (Model.OperationPLInvoiceAmountDueView)
                    {
                        <div class=" col-lg-3 withoutPadding" style="width:20% !important">
                            <div class="input-group">
                                <span class="input-group-addon SumControlsLabelFSize">@Html.LabelFor(model => model.InvAmountDue)</span>
                                @Html.TextBoxFor(model => model.InvAmountDue, new { @class = "form-control", readOnly = true })
                            </div>
                        </div>
                    }
                    @if (Model.OperationPLInvoiceTotalRefundView)
                    {
                        <div class=" col-lg-3 withoutPadding" style="width:19.5% !important">
                            <div class="input-group">
                                <span class="input-group-addon SumControlsLabelFSize">@Html.LabelFor(model => model.InvTotalRefund)</span>
                                @Html.TextBoxFor(model => model.InvTotalRefund, new { @class = "form-control", readOnly = true })
                            </div>
                        </div>
                    }
                </div>
            </div>
        }
        <div>
            <button class="btm btn-success" id="InvoiceSave" style="display:none;" type="submit"></button>
            <button class="btn14 btn60 pull-right" id="OperInvSaveBtn" onclick="InvoiceSaveAll()" type="button">Save</button>
            <input type="button" class="btn14 btn60" onclick="OperationInvoicePreview()" value="Preview">
        </div>
   </div>
}





